body, div, p, ul, li, h1, h2, h3, h4, h5, h6, form, input {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  user-select: none;
}

body {
  font: 12px/1.5 Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,"\5B8B\4F53",sans-serif;
  color: #666;
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
  color: #333;
  &:hover {
    color: red;
  }
}

img, svg {
  border: 0;
  vertical-align: middle;
}

input {
  outline: none;
}

// 公共容器
.container {
  width: 1200px;
  margin: 0 auto;
}

// 布局： 一行12格的 栅格系统
// 子元素浮动解决父元素塌陷问题
.row::after {
  content: '';
  display: block;
  clear: both;
}
// 一行12格
@for $i from 1 through 12 {
  .col-#{$i} {
    float: left;
    width: (100%/12)*$i;
  }
}
// 一行占20%
.col-b20 {
  float: left;
  width: 20%;
}
// 格子之间的距离
.gutter {
  [class^=col-] {
    padding: 0 5px;
  }
  &.row { // 与.row 一起出现时
    margin: 0 -5px;
  }
}

// 公共的外边距
.mt20 {
  margin-top: 20px;
}


// vue 加载动画组件
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}
